<template>
	<div class="ai-body">
		<div class="around">
			<div class="ai-title"></div>
			<div class="ai-title">{{titleName}}</div>
			<div class="ai-title" @click="clearHistory"></div>
		</div>
		<view v-if="messages.length==0 &&type==1" class="ai-tips">
			<view class="flex-start">
				<view>
					<image class="img-ai-head" src="/static/ai/zhushou.png"></image>
				</view>
				<view class="flex mar-0-5">
					<view class="font-weight font-size-25">HI~我是智能医助</view>
					<view>你身边的咨询助手，我可以为你提供以下服务，快来点击任意项功能体验吧～</view>
				</view>
			</view>
			<view>
				<view class="font-weight mar-5-0">猜你想问</view>
				<view class="guess-serve">
					<view v-for="(item, index) in listItem" :key="index">
						<view class="ai-item" :class="index==current?' active':' '" @click="handleClick(item,index)">
							<view>
								<image class="img-serve" :src="hostApi+item.pathImg"></image>
							</view>
							<view>
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="normal-words">
				<view class="normal-title">
					<view class="normal-title-bar">大家都在问什么?</view>
					<view class="normal-change" @click="changeNormalWords">
						<image class="img" src="/static/images/imgs/changeWords.png"></image>
						<view class="normal-title-btn">换一批</view>
					</view>
				</view>
				<view class="normal-content">
					<view v-for="(item,index) in listNormalWrod">
						<view class="word" @click="handleWord(item)">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<!-- 消息列表 -->
			<scroll-view scroll-y="true" class="message-list" :scroll-into-view="messageId" scroll-with-animation>
				<view v-for="(msg, index) in messages" :key="index" class="message-item " :class="msg.role"
					:id="'message'+index">
					<!-- <view :id="msg.id"> -->
					<view v-if="msg.role=='user'" class="row-user">
						<view class="img-role"></view>
						<text class="content-user ">{{ msg.content }}</text>
						<image class="img-role" src="/static/ai/visit.png"></image>
					</view>
					<view v-else class="row-assistant">
						<image class="img-role" src="/static/ai/zhushou.png"></image>
						<text class="content-ai flex-1">{{ msg.content }}</text>
						<view class="img-role"></view>
					</view>
					<!-- </view> -->
				</view>
			</scroll-view>
		</view>
		<view class="bottom-serve">
			<view class="pad-10-0" v-if="list.length>0">
				<view class="pad-0-10">您可能需要以下服务</view>
				<view class="ai-serve">
					<scroll-view scroll-x style="white-space: nowrap;touch-action: none;">
						<view v-for="(item, index) in list" :key="index" class="serve-item">
							<view class="ai-item" :style="'background-color:'+ item.describe"
								:class="index==current?'active':''" @click="handleClick(item,index)">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="ai-wait" v-if="count!=0">
				<image class="img-wait" src="/static/ai/wait.gif" :lazy-load="false"></image>
				<view class="scrolling-text">正在查找信息</view>
				<div class="scanning-text-container">
					<view class="mar-0-5 scanning-text">
						{{count}} 秒
					</view>
					<div class="scanning-highlight"></div>
				</div>
			</view>
			<view class="ai-question">
				<u-icon name="volume" class="ai-vioce" size="50"></u-icon>
				<view class="ai-out-input">
					<u-input class="ai-input" placeholder="你有什么想知道的，快来问我吧~" v-model="question">
					</u-input>
				</view>
				<image class="ai-button" src="/static/ai/send.png" @click="sendQuery"></image>
			</view>
		</view>
	</div>
</template>
<script>
	import {
		askDeepSeek,
		askDify,
		askDifySteam
	} from '@/api/deepseek';
	import {
		mapGetters,
		mapActions
	} from 'vuex'

	export default {
		props: {
			listItem: Array,
			title: String,
			type: Number
		},
		data() {
			return {
				question: '',
				messages: '',
				messageId: '',
				list: [],
				current: -1,
				count: 0,
				timer: null,
				keyWord: "",
				titleName: "",
				listNormalWrods: ["这么查看我的报告?", "互联网医院可以开药吗?", "请问门诊这么报道", "请问儿童如何办理就诊卡", "午餐报销吗?", "双休可以体检吗?",
					"晚上有医生值班吗?"
				],
				listNormalWrod: [],
			}
		},
		computed: {
			...mapGetters(['aiMessages', "hostApi"]),
		},
		mounted() {

			this.list = this.listItem
			this.titleName = this.title
			this.messages = this.aiMessages || []
			this.messages = []
			window.addEventListener('keydown', this.handleGlobalKey)
			this.changeNormalWords()
		},
		methods: {
			...mapActions(['setAiMessages']),
			async sendQuery() {
				if (!this.question.trim()) return;

				try {
					let obj = {
						"inputs": {},
						"query": this.question,
						// "response_mode": "streaming",
						"response_mode": "blocking",
						"conversation_id": "",
						"user": "abc-123",
						"key": this.keyWord
					}
					// 将用户输入添加到消息数组
					this.messages.push({
						role: "user",
						content: this.question,
						key: this.keyWord
					});

					this.question = ''
					this.messageId = "message" + (this.messages.length - 1)
					this.count = 0;
					this.timer = setInterval(() => {
						this.count++
					}, 1000)
					console.log(this.messageId, "--------------")
					// 调用API，传入整个消息历史
					// const assistantReply = await askDify(obj); // 这里传递当前所有消息
					const assistantReply = await askDify(obj); // 这里传递当前所有消息
					console.log(assistantReply)

					// 将助理回复添加到消息数组
					this.messages.push({
						role: "assistant",
						content: assistantReply.answer,
					});

				} catch (error) {
					this.messages.push({
						role: "assistant",
						content: "请求出错，请重试" + error
					});
					console.log(error)
				} finally {
					this.count = 0;
					clearInterval(this.timer)
					this.setAiMessages(this.messages)
				}
			},
			handleGlobalKey(e) {
				switch (e.key) {
					case 'Enter':
						this.sendQuery()
						break
					case ' ':
						if (!e.repeat) this.pause() // 防止长按重复触发
						break
				}
			},
			clearHistory() {
				this.messages = []
				this.setAiMessages([])
			},
			handleClick(item, index) {
				this.current = index
				this.keyWord = item.name
				if (this.type == 1) {
					this.messages = []
					this.titleName = item.name
					this.messages.push({
						role: "assistant",
						content: item.tips,
					});
				}
			},
			changeNormalWords() {
				this.listNormalWrod = []
				let length = this.listNormalWrods.length
				for (var i = 0; i < 4; i++) {
					let random = Math.floor(Math.random() * length)
					this.listNormalWrod.push(this.listNormalWrods[random])
				}
			},
			handleWord(item) {
				this.question = item;
			}
		},
	}
</script>
<style scoped>
	.normal-words {
		padding: 16px;
		background-color: white;
		margin: 10px 0;
		border-radius: 16rpx;

		.normal-title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.normal-title-bar {
				font-family: ZCOOL KuaiLe, ZCOOL KuaiLe;
				font-weight: 400;
				font-size: 18px;
				color: #000000;
				line-height: 16px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.normal-title-btn {

				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 14px;
				color: #41CFE6;
				line-height: 16px;
				text-align: left;
				font-style: normal;
				text-transform: none;

			}

			.img {
				width: 15px;
				height: 15px;
				margin: 5px;
			}
		}





		.normal-content {
			background-color: rgb(233, 240, 246);
			padding: 16rpx;
			margin: 10px 0;
			border-radius: 16rpx;

			.word {
				background-color: rgb(235, 235, 235);
				padding: 5px;
				margin: 10px 0;
				border-radius: 16rpx;
			}
		}

		.normal-change {
			display: flex;
			align-items: center;
		}
	}

	.ai-tips {
		padding: 10px;

		.guess-serve {
			background-color: white;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 10px;
			border-radius: 10px;
		}

		.active {
			border: 1px dashed gray;
		}

		.ai-item {
			text-align: center;
			padding: 10px;
		}

		.img-ai-head {
			width: 50px;
			height: 50px;
		}

		.img-serve {
			width: 30px;
			height: 30px;
		}
	}

	.scanning-text-container {
		position: relative;
		display: inline-block;
		font-weight: bold;
		color: #b9b91d;
		/* 默认文字颜色 */
	}

	.scanning-highlight {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg,
				transparent,
				rgba(255, 255, 255, 0.8),
				transparent);
		background-size: 200% 100%;
		animation: scanning 2s linear infinite;
	}

	@keyframes scanning {
		0% {
			background-position: -100% 0;
		}

		100% {
			background-position: 100% 0;
		}
	}

	.bottom-serve {
		background-color: rgb(225,249,254);
		position: absolute;
		bottom: 0;
		width: 100%;

		.ai-serve {
			padding: 10px;

			.active {
				border: 1px dashed gray;
			}

			.ai-item {
				border-radius: 5px;
				padding: 5px 10px;
			}

			.serve-item {
				display: inline-block;
				margin-right: 20rpx;
				border-radius: 5px;
			}
		}

		.img-wait {
			width: 20px;
			height: 20px;
		}

		.ai-wait {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 0 10px 10px;
			margin-top: -10px;
		}

		.ai-question {
			display: flex;
			justify-content: space-between;
			align-items: center;
			/* border: 1px solid gray; */
			/* border-radius: 10px 10px 0 0; */
			/* background-color: rgb(242, 242, 242); */
			padding: 10px;
		}


		.ai-vioce {
			margin: 10px;
		}

		.ai-out-input {
			flex: 1;
			background-color: white;
			padding: 0 10px;
			border-radius: 15px;
		}

		.ai-button {
			width: 30px;
			height: 30px;
			margin: 0 0 0 5px;
		}
	}

	.scrolling-text {
		/* font-size: 3rem; */
		font-weight: bold;
		background: linear-gradient(90deg,
				#ffc6ab, #ff7f00, #ffff00, #00ff00,
				#00ffff, #ffd5dc, #b3fff4, #ffb5b5);
		background-size: 400% 100%;
		/* 让渐变宽度是文字的 4 倍 */
		-webkit-background-clip: text;
		/* 只让文字部分显示背景 */
		color: transparent;
		/* 隐藏原始文字颜色 */
		animation: scrolling-gradient 5s linear infinite;
	}

	@keyframes scrolling-gradient {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 100% 0;
			/* 水平滚动 */
		}
	}

	.ai-body {
		height: 100vh;
		background: linear-gradient(to bottom, #e0f9ff, #eaf9fd);
	}

	.ai-title {
		height: 50px;
		font-weight: bold;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
	}

	.container {
		padding: 10px;
		height: 80vh;

		.message-list {
			height: 70vh;
			vertical-align: bottom;
		}

		.img-role {
			width: 30px;
			height: 30px;
		}

		.row-user {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
		}

		.row-assistant {
			display: flex;
			justify-content: flex-start;
			align-items: baseline;
		}

		.content-user {
			background-color: rgb(201, 251, 255);
			border-radius: 15px;
			padding: 10px 20px;
			margin: 10px 0;
			/* font-size: 25px; */
			font-weight: bold;
			display: flex;
			justify-content: flex-end;
		}

		.content-ai {
			background-color: rgb(245, 253, 255);
			border-radius: 15px;
			padding: 10px 20px;
			margin: 10px 0;
			display: flex;
			justify-content: flex-start;
		}

	}
</style>